<template>
  <div class="collection">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <Bg>
      <div v-if="Mycollection.length > 0" class="my-box">
        <div class="mycl" v-for="(item, index) in Mycollection" :key="item.pid">
          <img :src="item.smallImg" alt="" />
          <div class="name-box">
            <div class="name">{{ item.name }}</div>
            <div class="enname">{{ item.enname }}</div>
          </div>
          <div class="price-box"><div class="price">￥{{ item.price }}</div><van-icon name="delete-o" size="14" @click="cancel(item.pid ,index)"/></div>
        </div>
      </div>
      <div v-else>
        <van-empty description="没有收藏"/>
      </div>
    </Bg>
  </div>
</template>

<script>
import Bg from "../components/bg";
import "../assets/less/collection.less";
export default {
  name: "Collection",
  data() {
    return {
      //我的收藏数据
      Mycollection: [],
    };
  },
  components: {
    Bg,
  },
  created() {
    this.collection();
  },
  methods: {
    //返回上一级
    back() {
      this.$router.go(-1);
    },
    //查询收藏商品
    collection() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findAllLike",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res save ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 2000) {
            this.Mycollection = res.data.result;
            // console.log(this.Mycollection);
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    //取消(删除)收藏商品接口
    cancel( pid ,index){
      let tokenString = this.$cookies.get("tokenString");
      // console.log("tokenString ==> ", pid);

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "POST",
        url: this.baseUrl + "/notlike",
        data: {
          appkey: this.appkey,
          tokenString,
          pid: pid
        },
      })
        .then((res) => {
          // console.log("res getShopbagData ==>", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code == 900) {
            this.Mycollection.splice(index, 1);
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 1000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==>", err);
        });
    }
  },
};
</script>